//科研论文
<template>
  <div class="flex-1 flex-ver">
    <div class="mb8">
      <search @clearSearch='clearSearch' :status='true'>
        <el-form label-width='80px' inline autocomplete="off" :model="pageparm" class="search_box">
          <el-form-item label="论文题目">
            <el-input size="medium" clearable v-model.trim="pageparm.title" placeholder="请输入论文题目搜索" />
          </el-form-item>
          <el-form-item label="科室" v-if="adminShow">
            <inputSearch ref="search_d" type="departments" @onChange='searchChane($event,"departments_id")' />
          </el-form-item>
          <el-form-item label="论文类型">
            <el-select size="medium" v-model="pageparm.paper_type" @change='searchChane($event,"paper_type")'
              placeholder="请选择论文类型搜索" clearable>
              <el-option v-for="item in paperType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="论文类别">
            <el-select size="medium" v-model="pageparm.paper_category" @change='searchChane($event,"paper_category")'
              placeholder="请选择论文类别搜索" clearable>
              <el-option v-for="item in paperCategory" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="第一作者">
            <inputSearch ref="search_e" @onChange='searchChane($event,"first_author_id")' placeholder="请输入第一作者姓名搜索" />
          </el-form-item>
          <el-form-item label="作者类型">
            <el-select size="medium" v-model="pageparm.first_author_type"
              @change='searchChane($event,"first_author_type")' placeholder="请选择第一作者类型搜索" clearable>
              <el-option v-for="item in firstAuthorType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间">
            <el-date-picker @change='searchChane($event,"publication_time")' size="medium"
              v-model="pageparm.publication_time" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              placeholder="请选择出版/发表时间搜索">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="审核状态">
            <el-select size="medium" clearable v-model="pageparm.review_status" placeholder="请选择审核状态搜索"
              @change='searchChane($event,"review_status")'>
              <el-option v-for="item in reviewStatus" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <template slot="footer">
          <el-button v-permission="{action:'科研论文添加',effect:'delete'}" class="mr8" size="medium" type="primary"
            @click="handle(null,{},3)">新增科研论文</el-button>
          <exportExcel :apiFn='Apipaperinfos' name='科研论文' :self='true' :dataFn='dataFn' />
        </template>
      </search>
    </div>
    <el-table :data="tableData" class="flex-1" height="100%" size="medium" border highlight-current-row
      v-loading="tableLoading" stripe @sort-change="tableSortChange">
      <el-table-column align="center" v-for="(item,i) in headerList" :key="item.prop" :prop="item.prop"
        :label="item.label + (item.unit || '')" :width="item.width" :fixed="i === 0 ? true: false" show-overflow-tooltip
        sortable="custom">
        <template slot-scope="scope">
          <template v-if="item.prop === 'departments_id'">
            {{ scope.row.department?scope.row.department.name:'' }}
          </template>
          <template v-else-if="item.prop === 'first_author'">
            {{ scope.row.first_author_info?scope.row.first_author_info.name:scope.row.first_author}}
          </template>
          <template v-else-if="item.prop === 'paper_type'">
            {{ echo(scope.row.paper_type,paperType) }}
          </template>
          <template v-else-if="item.prop === 'review_status'">
            <span v-if="scope.row.review_status === 2"
              class="c-red">{{reviewStatusObj[scope.row.review_status]}}：{{scope.row.review_comment}}</span>
            <span v-else>{{reviewStatusObj[scope.row.review_status]}}</span>
          </template>
          <template v-else-if="item.prop === 'paper_category'">
            {{ echo(scope.row.paper_category,paperCategory) }}
          </template>
          <template v-else-if="item.prop === 'first_author_type'">
            {{ echo(scope.row.first_author_type,firstAuthorType) }}
          </template>
          <template v-else>
            {{ scope.row[item.prop] }}
          </template>
        </template>
      </el-table-column>
      <el-table-column align="center" label="论文封面" width="100">
        <template slot-scope="scope">
          <el-image v-if="scope.row.paper_cover" class="el-image" :src="uploadUrl + scope.row.paper_cover"
            :preview-src-list="[uploadUrl + scope.row.paper_cover]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" label="论文目录" width="100">
        <template slot-scope="scope">
          <el-image v-if="scope.row.paper_catalog" class="el-image" :src="uploadUrl + scope.row.paper_catalog"
            :preview-src-list="[uploadUrl + scope.row.paper_catalog]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" label="论文正文" width="100">
        <template slot-scope="scope">
          <el-image v-if="scope.row.paper_content" class="el-image" :src="uploadUrl + scope.row.paper_content"
            :preview-src-list="[uploadUrl + scope.row.paper_content]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" label="附件" width="180">
        <template slot-scope="scope">
          <div v-if="scope.row.attachment.length > 0">
            <el-image :z-index='3000' v-for="item in echoFiles(scope.row.attachment,true)" :key='item.id'
              class="table_cell--image" :src="uploadUrl + item.path"
              :preview-src-list="srcList(echoFiles(scope.row.attachment,true))">
            </el-image>
            <p v-for="v in echoFiles(scope.row.attachment,false)" :key="v.path">
              <el-tooltip effect="dark" :content="v.file_name" placement="top-end">
                <span class="shou xialine overhide_" @click="uploadFiles(v.path,v.file_name)">{{v.file_name}}</span>
              </el-tooltip>
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="135">
        <div class="flex-justify-end" slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.review_status == 1 ? '退审':'审核'" placement="bottom-end"
            v-show="scope.row.review_status != 2">
            <el-button v-permission="{action:'科研论文审核',effect:'delete'}"
              :type="scope.row.review_status == 1?'warning':'primary'" @click="examine_btns(scope.row,1)" size="small"
              :icon="scope.row.review_status == 1 ? 'el-icon-close' : 'el-icon-help'" circle></el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="修改信息" placement="bottom-end">
            <el-button v-permission="{action:'科研论文编辑',effect:'delete'}" size="small"
              @click="handle(scope.$index, scope.row,2)" icon="el-icon-edit" circle></el-button>
          </el-tooltip>
          <!-- v-permission="{action:'科研论文删除',effect:'delete'}" -->
          <el-tooltip effect="dark" content="删除" placement="bottom-end">
            <el-button v-if="scope.row.delete" size="small" type="danger" @click="deleteUser(scope.$index, scope.row)"
              icon="el-icon-delete" circle></el-button>
          </el-tooltip>
        </div>
      </el-table-column>
    </el-table>

    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>

    <el-dialog :visible.sync="editFormVisible" width="780px" @close='dialogClose' @closed="btnLoading = false"
      :close-on-click-modal='false' :close-on-press-escape='false' top="10vh">
      <h2 slot="title" class="tx-c">{{dialogTitle}}</h2>
      <el-form autocomplete="off" label-width="120px" :model="editForm" class="form_flex">
        <el-form-item v-for="(v, i) in editHeaderList" :key="i" :label="v.label" :class="v.required ? 'tip' : ''">
          <inputSearch :options="{type:'all'}" v-if="v.prop === 'first_author'" ref="e_id" :info='true' @onChange='e_id'
            :middleList='middleList' />
          <inputSearch v-else-if="v.prop === 'departments_id'" ref="departmentSearch" type="departments"
            @onChange='departmentsChange' />
          <el-select size="medium" v-else-if="v.prop === 'paper_type'" v-model="editForm[v.prop]" placeholder="请选择论文类型"
            clearable>
            <el-option v-for="item in paperType" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select size="medium" v-else-if="v.prop === 'paper_category'" v-model="editForm[v.prop]"
            placeholder="请选择论文类别" clearable>
            <el-option v-for="item in paperCategory" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select size="medium" v-else-if="v.prop === 'first_author_type'" v-model="editForm[v.prop]"
            placeholder="请选择第一作者类型" clearable>
            <el-option v-for="item in firstAuthorType" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-date-picker v-else-if="v.prop === 'publication_time'" size="medium" v-model="editForm[v.prop]" type="date"
            format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择日期时间">
          </el-date-picker>
          <el-autocomplete clearable v-else-if="v.prop === 'publication_type' || v.prop === 'paper_record'"
            v-model="editForm[v.prop]" :fetch-suggestions="(queryString, cb)=>querySearch(queryString, cb,v.prop)"
            :placeholder="'请输入' + v.label" @select="(item)=>handleSelect(item,v.prop)">
            <template slot-scope="{ item }">
              <div class="name overhide">{{item}}</div>
            </template>
          </el-autocomplete>
          <el-input v-else size="medium" :type="v.type" :autosize="{ minRows: 2, maxRows: 4}" clearable
            v-model="editForm[v.prop]" @mousewheel.native.prevent :placeholder="'请输入' + v.label">
            <template v-if="v.prop === 'publication_fee'" slot="append">万元</template>
          </el-input>
        </el-form-item>
      </el-form>
      <el-form label-width="120px" class="image_content">
        <el-form-item label="论文封面" class="tip" style="width:350px">
          <el-upload class="avatar-uploader" action="/" accept="image/*" :show-file-list="false" :auto-upload="false"
            :on-change='(file)=>onChangeImage(file,"cover")'>
            <img v-if="imageFile.paper_cover" :src="imageFile.paper_cover" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="论文目录" class="tip" style="width:350px">
          <el-upload class="avatar-uploader" action="/" accept="image/*" :show-file-list="false" :auto-upload="false"
            :on-change='(file)=>onChangeImage(file,"catalog")'>
            <img v-if="imageFile.paper_catalog" :src="imageFile.paper_catalog" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="论文正文" class="tip" style="width:350px">
          <el-upload class="avatar-uploader" action="/" accept="image/*" :show-file-list="false" :auto-upload="false"
            :on-change='(file)=>onChangeImage(file,"content")'>
            <img v-if="imageFile.paper_content" :src="imageFile.paper_content" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <el-form label-width="120px">
        <el-form-item label="附件上传">
          <el-upload style="width: 500px" multiple action="/" :on-change='onChangeFile' :on-remove="onRemoveFile"
            :auto-upload="false" :file-list='fileList'>
            <el-button size="medium" type="primary">选择文件</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="已上传附件" v-if="editForm.attachment && editForm.attachment.length > 0">
          <div style="width: 500px">
            <p v-for="v in editForm.attachment" :key="v.path" class="flex-space-between">
              <span class="shou xialine overhide_ mr16" @click="uploadFiles(v.path,v.file_name)">{{v.file_name}}</span>
              <i class="el-icon-close f-14" @click="delFiles(v)"></i>
            </p>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="flex-justify-bcenter">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit" :loading='btnLoading'>确 定</el-button>
      </div>
    </el-dialog>

    <!-- 审核 -->
    <examine ref="examine" @submit='examineSubmit' :comeBack='comeBack' />

  </div>
</template>

<script>
  import {
    Apipaperinfos,
    ApipaperinfosAdd,
    ApipaperinfosPut,
    ApipaperinfosDel,
    ApipaperinfosCheck,
    ApiupLoadFiles
  } from '@/api'
  import {
    reviewStatus,
    reviewStatusObj
  } from "@/assets/js"
  import {utils_upload,debounce,adminShow} from "@/utils/index";
  import {
    headerList,paperType,paperTypeObj,paperCategory,paperCategoryObj,
    firstAuthorType,firstAuthorTypeObj,publication_type_list,paper_record_list
  } from '../js/paper'
  import multipleSearch from '@/components/multipleSearch'
  import {isIMage} from "@/utils/test";
  import {uploadUrl} from '@/api/request'
  export default {
    components: {
      multipleSearch
    },
    computed: {
      editHeaderList() {
        let list = headerList.filter(item => item.prop !== 'review_status')
        return list.sort((a, b) => b.required - a.required)
      }
    },
    data() {
      return {
        Apipaperinfos,
        adminShow: adminShow(),
        uploadUrl: uploadUrl(),
        reviewStatus,
        reviewStatusObj,
        tableData: [],
        editFormVisible: false,
        editForm: {
          id: '',
          title: '',
          departments_id: '',
          paper_type: '',
          paper_category: '',
          corresponding_author: '',
          first_author: '',
          first_author_id: '',
          first_author_type: '',
          publication: '',
          paper_record: '',
          publication_type: '',
          publication_time: '',
          contribution: '',
          factor: '',
          publication_fee: '',
          attachment: [],
          paper_cover: '',
          paper_catalog: '',
          paper_content: '',
          other_people: '',
        }, //修改或者查看详情

        pageparm: {
          page: 1,
          perPage: 20,
          total: null,
          sort_str: null,
          sort_order: 'desc',
        },
        tableLoading: false,

        btnLoading: false,

        headerList,
        paperType,
        paperCategory,
        firstAuthorType,
        rules: ['title', 'departments_id', 'paper_type', 'paper_category', 'first_author_id', 'first_author_type',
          'publication', 'paper_record', 'publication_type', 'publication_time'
        ],

        examine_id: null, //审核id
        comeBack: false,

        middleList: [],
        dialogTitle: '',

        fileList: [],

        // peopleList: [],
        // member: [],
        imageFile: {
          paper_cover: '',
          paper_catalog: '',
          paper_content: '',
          cover: "",
          catalog: "",
          content: ""
        }
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      querySearch(queryString, cb,prop){
        let str = this.editForm[prop]
        let arr = []
        switch (prop) {
          case 'publication_type': arr = publication_type_list; 
            break;
          case 'paper_record': arr = paper_record_list; 
            break;
        }
        const callbackList = str ? arr.filter(item => item.includes(str)) : arr
        cb(callbackList)
      },
      handleSelect(item,prop){
        this.editForm[prop] = item
      },
      onChangeImage(file, ele) {
        const url = URL.createObjectURL(file.raw);
        this.$set(this.imageFile, 'paper_' + ele, url)
        this.imageFile[ele] = file.raw
      },
      echoFiles(arr = [], flag = true) {
        return arr.filter(item => isIMage(item.file_name) === flag)
      },
      srcList(arr = []) {
        return arr.map(item => this.uploadUrl + item.path)
      },
      closeMember(item) {
        this.member = this.member.filter(v => v.member_id !== item.member_id)
      },
      choseList(list) {
        this.peopleList = list
      },
      dataFn(data, tableHeade) {
        let tabStr = ''
        data.forEach((item, index) => {
          let tabRowStr = "";
          tabStr += `<tr>`;
          for (let i = 0; i < tableHeade.length; i++) {
            const key = tableHeade[i]
            if (key === 'departments_id') {
              tabRowStr += `<td>${item.department?item.department.name:''}</td>`;
            } else if (key === 'first_author') {
              tabRowStr += `<td>${item.first_author_info?item.first_author_info.name:item.first_author}</td>`;
            } else if (key === 'review_status') {
              tabRowStr +=
                `<td>${reviewStatusObj[item.review_status]}${item.review_comment?('：' + item.review_comment):''}</td>`;
            } else if (key === 'paper_type') {
              tabRowStr += `<td>${paperTypeObj[item.paper_type] || ""}</td>`;
            } else if (key === 'paper_category') {
              tabRowStr += `<td>${paperCategoryObj[item.paper_category] || ""}</td>`;
            } else if (key === 'first_author_type') {
              tabRowStr += `<td>${firstAuthorTypeObj[item.first_author_type] || ""}</td>`;
            } else {
              tabRowStr += `<td>${item[key] || ''}</td>`;
            }
          }
          tabStr += tabRowStr;
          tabStr += "</tr>";
        });
        return tabStr
      },
      uploadFiles: debounce(function (url, name) {
        utils_upload(url, name)
      }, 500, true),
      delFiles(v) {
        this.editForm.attachment = this.editForm.attachment.filter(item => item.id !== v.id)
      },
      onChangeFile(file, fileList) {
        this.fileList.push(file)
      },
      onRemoveFile(file, fileList) {
        this.fileList = fileList
      },
      //审核
      examineSubmit(options) {
        const loading = this.$loading({
          lock: true,
          text: '加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        options.id = this.examine_id
        ApipaperinfosCheck(options, options.id).then(res => {
          this.getList()
        }).catch(() => {
          this.$message.error('服务器错误，请重新提交');
        }).finally(() => {
          loading.close()
        })
      },
      examine_btns(item, i) {
        this.examine_id = item.id
        if (item.review_status == 1) {
          this.comeBack = true
          this.$refs.examine.options.review_status = 2
        } else {
          this.comeBack = false
          this.$refs.examine.options.review_status = null
        }
        this.$refs.examine.examineShow = true

      },
      echo(i, arr) {
        let label
        for (const item of arr) {
          if (item.value === i) {
            label = item.label
            break;
          }
        }
        return label
      },
      tableSortChange(column) {
        if (column.order === "descending") {
          this.pageparm.sort_str = column.prop;
          this.pageparm.sort_order = "desc";
        } else if (column.order === "ascending") {
          this.pageparm.sort_str = column.prop;
          this.pageparm.sort_order = "asc";
        } else {
          this.pageparm.sort_str = null;
          this.pageparm.sort_order = null;
        }
        this.getList()
      },
      //搜索
      clearSearch() {
        this.$refs.search_e.clear()
        if (this.adminShow) this.$refs.search_d.clear()
      },
      searchChane(i, val) {
        this.pageparm[val] = i
        this.pageparm.page = 1
        this.getList()
      },
      //分页
      callFather(pageparm) {
        this.pageparm.page = pageparm.page
        this.pageparm.perPage = pageparm.perPage
        this.getList()
      },
      getList() {
        this.tableLoading = true
        Apipaperinfos(this.pageparm).then(({
          data,
          page
        }) => {
          this.tableData = data || []
          this.pageparm.total = page.total
          this.tableLoading = false
        }).catch(() => {
          this.tableLoading = false
        })
      },
      handle(index, value, i) {
        for (const key in this.editForm) {
          this.editForm[key] = value[key]
        }
        this.imageFile.paper_cover = value.paper_cover ? this.uploadUrl + value.paper_cover : ''
        this.imageFile.paper_catalog = value.paper_catalog ? this.uploadUrl + value.paper_catalog : ''
        this.imageFile.paper_content = value.paper_content ? this.uploadUrl + value.paper_content : ''
        this.editFormVisible = true
        this.dialogTitle = '新增科研论文'
        if (i == 2) {
          this.editForm.attachment = [...value.attachment]
          // this.member = [...value.member]
          this.dialogTitle = '编辑科研论文'
          this.$nextTick(() => {
            this.$refs.departmentSearch[0].departments_id = value.departments_id
            this.middleList = [{
              employees_id: value.first_author_id,
              employee: {
                name: value.first_author
              }
            }]
          })
        } else {
          if (!this.adminShow) {
            this.editForm.departments_id = this.$store.state.userInfo.department_id
            this.$nextTick(() => {
              this.$refs.departmentSearch[0].departments_id = this.editForm.departments_id
            })
          }
        }
      },
      e_id({
        id,
        name
      }) {
        this.editForm.first_author_id = id
        this.editForm.first_author = name
      },
      departmentsChange(id) {
        this.editForm.departments_id = id
      },
      dialogClose() {
        this.$refs.e_id[0].clear()
        this.$refs.departmentSearch[0].clear()
        this.fileList = []
        // this.$refs.multipleSearch.clear()
        // this.peopleList = []
        for (const key in this.imageFile) {
          this.imageFile[key] = ""
        }

      },
      deleteUser(index, value) {
        this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({
            lock: true,
            text: '加载中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          ApipaperinfosDel(value.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getList()
          }).finally(() => {
            loading.close()
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      submit: debounce(function () { //提交  修改或新增
        const options = this.editForm
        for (const key of this.rules) {
          if (!options[key] && options[key] !== 0) {
            this.$message({
              type: 'error',
              message: '必填信息请填写完整！'
            });
            return
          }
        }
        if (!this.imageFile.paper_cover) {
          this.$message.error('请上传论文封面');
          return
        }
        if (!this.imageFile.paper_catalog) {
          this.$message.error('请上传论文目录');
          return
        }
        if (!this.imageFile.paper_content) {
          this.$message.error('请上传论文正文');
          return
        }
        this.btnLoading = true
        const formData = new FormData()
        for (const i in options) {
          if (i !== 'attachment') {
            if (options[i] === null || options[i] === undefined) options[i] = ""
            formData.append(i, options[i])
          }
        }
        if (this.fileList.length > 0) {
          this.fileList.forEach(item => {
            formData.append('files[]', item.raw)
          })
        }

        // //其他人员
        // let member = []
        // if (this.member.length > 0) {
        //   member = Array.from(new Set(this.member.map(item => item.member_id).concat(this.peopleList)))
        // } else {
        //   member = this.peopleList
        // }
        // if (member.length > 0) {
        //   member.forEach(item => {
        //     formData.append('member[]', item)
        //   })
        // } else {
        //   formData.append('member[]', [])
        // }

        //论文图片
        for (const key of ['cover', 'catalog', 'content']) {
          formData.append(key, this.imageFile[key])
        }

        if (options.id) { //有ID就是修改
          if (options.attachment && options.attachment.length > 0) {
            options.attachment.forEach(item => {
              formData.append('file_name[]', item.file_name)
              formData.append('file_path[]', item.file_path)
            })
          } else {
            formData.append('file_name[]', [])
            formData.append('file_path[]', [])
          }
          ApipaperinfosPut(formData, options.id, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }).then(res => {
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
            this.editFormVisible = false
            this.getList()
          }).catch(() => {
            this.btnLoading = false
            // this.$message({
            //   type: 'error',
            //   message: '修改失败!'
            // });
          })
        } else {
          ApipaperinfosAdd(formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }).then(res => {
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
            this.editFormVisible = false
            this.getList()
          }).catch(() => {
            this.btnLoading = false
            // this.$message({
            //   type: 'error',
            //   message: '添加失败!'
            // });
          })
        }
      }, 800, true)
    },

  }
</script>
<style lang='less' scoped>
  .multipleSearch {
    width: 565px;

    /deep/.el-select__input {
      width: 100%;
    }

    /deep/.el-input__inner {
      width: 100%;
    }
  }

  .avatar-uploader {
    height: 100px;
  }

  .avatar-uploader /deep/ .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader /deep/.el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

  .el-image {
    display: block;
    margin: 0 auto;
    width: 40px;
    height: 40px;
  }

  .image_content {
    display: flex;
  }

  .form_flex {
    /deep/.el-form-item:nth-of-type(odd) {
      margin-right: 39px;
    }
  }
</style>